<div class="panel panel-default">
	<div class="panel-body">
		<p-tabView (onChange)="onTabChange($event)">
			<p-tabPanel header="&nbsp;&nbsp;&nbsp;&nbsp;系&nbsp;&nbsp;&nbsp;&nbsp;统&nbsp;&nbsp;&nbsp;&nbsp;" leftIcon="fa-cube">
				<div class="row">
					<div class="col-lg-8">
						<button class="mb-sm btn btn-primary btn-outline" type="button" (click)="addaccount.show();addBtn()">
							添加帐号
						</button>
						<button class="mb-sm btn btn-primary btn-outline" type="button" style="margin-left:15px;" (click)="updateBtn()">
							&nbsp;&nbsp;&nbsp;&nbsp;编辑&nbsp;&nbsp;&nbsp;&nbsp;
						</button>
						<button class="mb-sm btn btn-primary btn-outline" type="button" style="margin-left:15px;" (click)="changeState(1)">
							&nbsp;&nbsp;&nbsp;&nbsp;冻结&nbsp;&nbsp;&nbsp;&nbsp;
						</button>
						<button class="mb-sm btn btn-primary btn-outline" type="button" style="margin-left:15px;" (click)="changeState(2)">
							&nbsp;&nbsp;&nbsp;&nbsp;激活&nbsp;&nbsp;&nbsp;&nbsp;
						</button>
						<button class="mb-sm btn btn-primary btn-outline" type="button" style="margin-left:15px;" (click)="resetPwd()">
							重置密码
						</button>
						<button class="mb-sm btn btn-primary btn-outline" type="button" style="margin-left:15px;" (click)="destroy()">
							&nbsp;&nbsp;&nbsp;&nbsp;删除&nbsp;&nbsp;&nbsp;&nbsp;
						</button>
					</div>
					<div class="col-lg-4">
						<div class="form-group has-feedback pull-right">
							<input #xt type="text" class="form-control" placeholder="筛选">
							<span class="glyphicon glyphicon-search form-control-feedback"></span>
						</div>
					</div>
				</div>	
				<p-dataTable [value]="system" [(selection)]="selectedSystem" [paginator]="true" [rows]="10" [globalFilter]="xt" selectionMode="single" (onRowSelect)="onRowSelect($event)">
					<p-column [style]="{'width':'30px'}" selectionMode="single"></p-column>
					<p-column header="系统" [style]="{'text-align':'center'}">
						<ng-template let-col let-system="rowData" pTemplate="body">
							<span>鹏博士</span>
						</ng-template>
					</p-column>
					<p-column field="account" header="帐号" [style]="{'text-align':'center','width':'180px'}">
						<ng-template let-col let-account="rowData" pTemplate="body">
							<span style="word-break:break-all;">{{account[col.field]}}</span>
						</ng-template>
					</p-column>
					<p-column field="name" header="姓名" [style]="{'text-align':'center'}"></p-column>
					<p-column field="email" header="邮箱" [style]="{'text-align':'center','width':'180px'}">
						<ng-template let-col let-account="rowData" pTemplate="body">
							<span style="word-break:break-all;">{{account[col.field]}}</span>
						</ng-template>
					</p-column>
					<p-column field="mobile" header="联系方式" [style]="{'text-align':'center'}">
						<ng-template let-col let-account="rowData" pTemplate="body">
							<span style="word-break:break-all;">{{account[col.field]}}</span>
						</ng-template>
					</p-column>
					<p-column field="userTypeName" header="角色" [style]="{'text-align':'center'}"></p-column>
					<p-column field="state" header="状态" [style]="{'text-align':'center','width':'80px'}">
						<ng-template let-col let-account="rowData" pTemplate="body">
							<span *ngIf="account[col.field] == '1'" style="color:#FF0000">激活</span>
							<span *ngIf="account[col.field] == '2'" style="color:#1AACDA">冻结</span>
						</ng-template>
					</p-column>
				</p-dataTable>

			</p-tabPanel>
			<p-tabPanel header="&nbsp;&nbsp;&nbsp;&nbsp;渠&nbsp;&nbsp;&nbsp;&nbsp;道&nbsp;&nbsp;&nbsp;&nbsp;" leftIcon="fa-sitemap">
				<div class="row">
					<div class="col-lg-8">
						<button class="mb-sm btn btn-primary btn-outline" type="button" (click)="addaccount.show();addBtn()">
							添加帐号
						</button>
						<button class="mb-sm btn btn-primary btn-outline" type="button" style="margin-left:15px;" (click)="updateBtn()">
							&nbsp;&nbsp;&nbsp;&nbsp;编辑&nbsp;&nbsp;&nbsp;&nbsp;
						</button>
						<button class="mb-sm btn btn-primary btn-outline" type="button" style="margin-left:15px;" (click)="changeState(1)">
							&nbsp;&nbsp;&nbsp;&nbsp;冻结&nbsp;&nbsp;&nbsp;&nbsp;
						</button>
						<button class="mb-sm btn btn-primary btn-outline" type="button" style="margin-left:15px;" (click)="changeState(2)">
							&nbsp;&nbsp;&nbsp;&nbsp;激活&nbsp;&nbsp;&nbsp;&nbsp;
						</button>
						<button class="mb-sm btn btn-primary btn-outline" type="button" style="margin-left:15px;" (click)="resetPwd()">
							重置密码
						</button>
						<button class="mb-sm btn btn-primary btn-outline" type="button" style="margin-left:15px;" (click)="destroy()">
							&nbsp;&nbsp;&nbsp;&nbsp;删除&nbsp;&nbsp;&nbsp;&nbsp;
						</button>
					</div>
					<div class="col-lg-4">
						<div class="form-group has-feedback pull-right">
							<input #qd type="text" class="form-control" placeholder="筛选">
							<span class="glyphicon glyphicon-search form-control-feedback"></span>
						</div>
					</div>
				</div>	
				<p-dataTable [value]="channel" [(selection)]="selectedChannel" [paginator]="true" [rows]="10" [globalFilter]="qd" selectionMode="single" (onRowSelect)="onRowSelect($event)">
					<p-column [style]="{'width':'30px'}" selectionMode="single"></p-column>
					<p-column field="chnlName" header="渠道名称" [style]="{'text-align':'center'}"></p-column>
					<p-column field="groupName" header="分组" [style]="{'text-align':'center'}"></p-column>
					<p-column field="account" header="帐号" [style]="{'text-align':'center','width':'180px'}">
						<ng-template let-col let-account="rowData" pTemplate="body">
							<span style="word-break:break-all;">{{account[col.field]}}</span>
						</ng-template>
					</p-column>
					<p-column field="name" header="姓名" [style]="{'text-align':'center'}"></p-column>
					<p-column field="email" header="邮箱" [style]="{'text-align':'center','width':'180px'}">
						<ng-template let-col let-account="rowData" pTemplate="body">
							<span style="word-break:break-all;">{{account[col.field]}}</span>
						</ng-template>
					</p-column>
					<p-column field="mobile" header="联系方式" [style]="{'text-align':'center'}">
						<ng-template let-col let-account="rowData" pTemplate="body">
							<span style="word-break:break-all;">{{account[col.field]}}</span>
						</ng-template>
					</p-column>
					<p-column field="userTypeName" header="角色" [style]="{'text-align':'center'}"></p-column>
					<p-column field="state" header="状态" [style]="{'text-align':'center','width':'80px'}">
						<ng-template let-col let-account="rowData" pTemplate="body">
							<span *ngIf="account[col.field] == '1'" style="color:#FF0000">激活</span>
							<span *ngIf="account[col.field] == '2'" style="color:#1AACDA">冻结</span>
						</ng-template>
					</p-column>
				</p-dataTable>
			</p-tabPanel>
			<p-tabPanel header="&nbsp;&nbsp;&nbsp;&nbsp;用&nbsp;&nbsp;&nbsp;&nbsp;户&nbsp;&nbsp;&nbsp;&nbsp;" leftIcon="fa-user">
				<div class="row">
					<div class="col-lg-8">
						<button class="mb-sm btn btn-primary btn-outline" type="button" (click)="addaccount.show();addBtn()">
							添加帐号
						</button>
						<button class="mb-sm btn btn-primary btn-outline" type="button" style="margin-left:15px;" (click)="updateBtn()">
							&nbsp;&nbsp;&nbsp;&nbsp;编辑&nbsp;&nbsp;&nbsp;&nbsp;
						</button>
						<button class="mb-sm btn btn-primary btn-outline" type="button" style="margin-left:15px;" (click)="changeState(1)">
							&nbsp;&nbsp;&nbsp;&nbsp;冻结&nbsp;&nbsp;&nbsp;&nbsp;
						</button>
						<button class="mb-sm btn btn-primary btn-outline" type="button" style="margin-left:15px;" (click)="changeState(2)">
							&nbsp;&nbsp;&nbsp;&nbsp;激活&nbsp;&nbsp;&nbsp;&nbsp;
						</button>
						<button class="mb-sm btn btn-primary btn-outline" type="button" style="margin-left:15px;" (click)="resetPwd()">
							重置密码
						</button>
						<button class="mb-sm btn btn-primary btn-outline" type="button" style="margin-left:15px;" (click)="destroy()">
							&nbsp;&nbsp;&nbsp;&nbsp;删除&nbsp;&nbsp;&nbsp;&nbsp;
						</button>
					</div>
					<div class="col-lg-4">
						<div class="form-group has-feedback pull-right">
							<input #yh type="text" class="form-control" placeholder="筛选">
							<span class="glyphicon glyphicon-search form-control-feedback"></span>
						</div>
					</div>
				</div>	
				<p-dataTable [value]="user" [(selection)]="selectedUser" [paginator]="true" [rows]="10" [globalFilter]="yh" selectionMode="single" (onRowSelect)="onRowSelect($event)">
					<p-column [style]="{'width':'30px'}" selectionMode="single"></p-column>
					<p-column field="custName" header="客户名称" [style]="{'text-align':'center'}"></p-column>
					<p-column field="areaName" header="分组" [style]="{'text-align':'center'}"></p-column>
					<p-column field="userName" header="姓名" [style]="{'text-align':'center'}"></p-column>
					<p-column field="account" header="帐号" [style]="{'text-align':'center','width':'180px'}">
						<ng-template let-col let-account="rowData" pTemplate="body">
							<span style="word-break:break-all;">{{account[col.field]}}</span>
						</ng-template>
					</p-column>
					<p-column field="email" header="邮箱" [style]="{'text-align':'center','width':'180px'}">
						<ng-template let-col let-account="rowData" pTemplate="body">
							<span style="word-break:break-all;">{{account[col.field]}}</span>
						</ng-template>
					</p-column>
					<p-column field="mobile" header="联系方式" [style]="{'text-align':'center'}">
						<ng-template let-col let-account="rowData" pTemplate="body">
							<span style="word-break:break-all;">{{account[col.field]}}</span>
						</ng-template>
					</p-column>
					<p-column field="userTypeName" header="角色" [style]="{'text-align':'center'}"></p-column>
					<p-column field="state" header="状态" [style]="{'text-align':'center','width':'80px'}">
						<ng-template let-col let-account="rowData" pTemplate="body">
							<span *ngIf="account[col.field] == '1'" style="color:#FF0000">激活</span>
							<span *ngIf="account[col.field] == '2'" style="color:#1AACDA">冻结</span>
						</ng-template>
					</p-column>
				</p-dataTable>
			</p-tabPanel>
		</p-tabView>
	</div>
</div>

<div class="modal fade" bsModal #addaccount="bs-modal" [config]="{backdrop: false}" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"
 aria-hidden="true">
	<div class="modal-dialog modal-md">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" aria-label="Close" (click)="addaccount.hide()">
                    <span aria-hidden="true">&times;</span>
                </button>
				<h4 class="modal-title" *ngIf="addacc.isadd === '1'">
					添加账户
				</h4>
				<h4 class="modal-title" *ngIf="addacc.isadd === '2'">
					修改账户
				</h4>
			</div>
			<div class="modal-body">
				<form class="form-horizontal" #addaccountForm="ngForm">
					<div class="form-group"  *ngIf="judgeThree === '0'">
						<label class="col-lg-3 control-label" for="addacc.system">
							所属系统：
						</label>
						<div class="col-lg-8">
          					<input class="form-control" type="text" name="addacc.system" value="鹏博士"  [disabled]="true">
						</div>
					</div>
					<div class="form-group"  *ngIf="judgeThree === '1'">
						<label class="col-lg-3 control-label" for="addacc.channel">
							所属渠道：
						</label>
						<div class="col-lg-8">
          					<ng-select *ngIf="addacc.isadd === '1'" name="addacc.channel" [(ngModel)]="addacc.channel" #channelSelect placeholder="--选择渠道--" [required]="true"  (selected)="channelGroupSelected($event)"> </ng-select>
							<ng-select *ngIf="addacc.isadd === '2'" name="addacc.channel" [(ngModel)]="addacc.channel" #channelSelect placeholder="--选择渠道--" [required]="true"  (selected)="channelGroupSelected($event)" [disabled]="true"> </ng-select>
						</div>
					</div>
					<div class="form-group"  *ngIf="judgeThree === '1'">
						<label class="col-lg-3 control-label" for="addacc.channelGroup">
							所属分组：
						</label>
						<div class="col-lg-8">
          					<ng-select name="addacc.channelGroup" [(ngModel)]="addacc.channelGroup" #channelGroupSelect placeholder="--选择分组--" [required]="true"> </ng-select>
						</div>
					</div>
					<div class="form-group"  *ngIf="judgeThree === '2'">
						<label class="col-lg-3 control-label" for="addacc.cust">
							所属客户：
						</label>
						<div class="col-lg-8">
          					<ng-select *ngIf="addacc.isadd === '1'" name="addacc.cust" [(ngModel)]="addacc.cust" #custSelect placeholder="--选择客户--" [required]="true"  (selected)="custGroupSelected($event)"> </ng-select>
							<ng-select *ngIf="addacc.isadd === '2'" name="addacc.cust" [(ngModel)]="addacc.cust" #custSelect placeholder="--选择客户--" [required]="true"  (selected)="custGroupSelected($event)" [disabled]="true"> </ng-select>
						</div>
					</div>
					<div class="form-group"  *ngIf="judgeThree === '2'">
						<label class="col-lg-3 control-label" for="addacc.custGroup">
							所属分组：
						</label>
						<div class="col-lg-8">
          					<ng-select name="addacc.custGroup" [(ngModel)]="addacc.custGroup" #custGroupSelect placeholder="--选择分组--" [required]="true"> </ng-select>
						</div>
					</div>
					<div class="form-group">
						<label class="col-lg-3 control-label" for="addacc.accounts">
							帐号：
						</label>
						<div class="col-lg-8">
          					<input  *ngIf="addacc.isadd === '1'" class="form-control" type="text" name="addacc.accounts" [(ngModel)]="addacc.accounts" required (blur)="judgeAccount($event.target.value)">
							<input  *ngIf="addacc.isadd === '2'" class="form-control" type="text" name="addacc.accounts" [(ngModel)]="addacc.accounts" required [disabled]="true"> 
						</div>
					</div>
					<div class="form-group" *ngIf="addacc.accountError.length>0">
						<div class="col-sm-offset-3 col-sm-8" style="color:#F05050;">
							{{addacc.accountError}}
						</div>
					</div>
					<div class="form-group">
						<label class="col-lg-3 control-label" for="addacc.name">
							姓名：
						</label>
						<div class="col-lg-8">
          					<input class="form-control" type="text" name="addacc.name" [(ngModel)]="addacc.name" required>
						</div>
					</div>
					<div class="form-group">
						<label class="col-lg-3 control-label" for="addacc.email">
							邮箱：
						</label>
						<div class="col-lg-8">
          					<input class="form-control" (input)="changeEmail($event.target.value)" type="text" name="addacc.email" [(ngModel)]="addacc.email" required>
						</div>
					</div>
					<div class="form-group" *ngIf="addacc.emailError.length>0">
						<div class="col-sm-offset-3 col-sm-8" style="color:#F05050;">
							{{addacc.emailError}}
						</div>
					</div>
					<div class="form-group">
						<label class="col-lg-3 control-label" for="addacc.mobile">
							手机：
						</label>
						<div class="col-lg-8">
          					<input class="form-control" type="text" name="addacc.mobile" [(ngModel)]="addacc.mobile">
						</div>
					</div>
					<div class="form-group">
						<label class="col-lg-3 control-label" for="addacc.telephone">
							电话：
						</label>
						<div class="col-lg-8">
          					<input class="form-control" type="text" name="addacc.telephone" [(ngModel)]="addacc.telephone">
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-3 control-label" for="addacc.remark">
							备注：
						</label>
						<div class="col-sm-8">
							<input class="form-control" name="addacc.remark" rows="1" style="resize:none" id="remark" #remark="ngModel" [(ngModel)]="addacc.remark" maxlength="100" placeholder="不超过100个字">
						</div>
					</div>
					<div class="form-group">
						<label class="col-lg-3 control-label" for="addacc.authorityType">
							权限：
						</label>
						<div class="col-lg-8">
          					<ng-select name="addacc.authorityType" [(ngModel)]="addacc.authorityType" #addaccountSelect placeholder="--选择权限--" [required]="true"> </ng-select>
						</div>
					</div>
										
					<div class="form-group text-right">
						<div class="col-sm-offset-7 col-sm-2">
							<button class="mb-sm btn btn-primary btn-outline" type="button" (click)="addaccount.hide();">
								取消
							</button>
						</div>
						<div class="col-sm-2">
							<button *ngIf="addacc.isadd === '1'" class="mb-sm btn btn-primary btn-outline" type="button" [disabled]="!addaccountForm.form.valid||addacc.able||judge" (click)="query()">
								创建
							</button>
							<button *ngIf="addacc.isadd === '2'" class="mb-sm btn btn-primary btn-outline" type="button" [disabled]="!addaccountForm.form.valid||addacc.able" (click)="query()">
								修改
							</button>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>